<template>
  <div>
    <Form ref="formInline" :model="searchData" inline :label-width="90">
      <label for="">客户名称:</label>
      <Input type="text" v-model="searchData.customer_name" style="width: 150px" clearable />
      <label for="">所属部门:</label>
      <Select v-model="searchData.department_id" style="width: 150px" clearable>
        <Option v-for="item in departmentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <label for="">设计师名称:</label>
      <Input type="text" v-model="searchData.design_name" style="width: 150px" clearable />
      <label for="">订单名称名称:</label>
      <Input type="text" v-model="searchData.order_name" style="width: 150px" clearable />
      <label for="">设计类型:</label>
      <Select v-model="searchData.design_type" filterable style="width: 150px" clearable>
        <Option v-for="item in designArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      时间：
      <Date-picker type="date" style="width: 150px" v-model="searchData.create_time" clearable></Date-picker>
      <Button type="primary" @click="search()" style="margin-left: 10px">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
    </Form>
    <br />
    <Table :columns="columns" :data="list" @on-sort-change="customSort" size="small" :highlight-row="true"
      max-height="800" border stripe>
      <template slot-scope="{ row, index }" slot="fromSlot">
        <span>{{ row.from_user_name }} - {{ row.to_user_name }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="makeSlot">
        <Tooltip content="聊天记录" style="margin-left: 10px" placement="top">
          <Icon type="ios-paper-outline" size="24" color="#19be6b" style="cursor: pointer"
            @click="showChatInfo(row.chat_sign)" />
        </Tooltip>
        <Tooltip content="下载" style="margin-left: 10px" placement="top">
          <Icon type="md-arrow-round-down" size="24" color="#ed4014" style="cursor: pointer"
            @click="download(row.chat_identify)" />
        </Tooltip>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize"
      :current="searchData.page">
    </Paginate>

    <!-- 编辑 -->
    <Modal v-model="chatInfoModal" title="聊天记录" :width="70">
      <Table :columns="chatInfoColumns" :data="chatInfoList" size="small" :highlight-row="true" max-height="800" border
        stripe>
        <template slot-scope="{ row, index }" slot="fromSlot">
          <span>{{ row.from_user_name }}：</span>
        </template>
        <template slot-scope="{ row, index }" slot="contentSlot">
          <div>
            <span v-if="row.type == 'webrtc'">语音通话：{{ row.content }}</span>
            <span v-html="row.content" v-if="row.type == 'text' || row.type == 'new_order'"></span>
            <img :src="row.full_src" v-if="row.file_cate == 2 && row.file_id > 0" style="width: 300px;"
              @click="showImg(row.full_src)" />
            <video v-if="row.file_cate == 4 && row.file_id > 0" width="320" height="240" controls>
              <source :src="row.full_src">
            </video>
            <audio controls v-if="row.file_cate == 3 && row.file_id > 0">
              <source :src="row.full_src" type="audio/ogg">
            </audio>
            <a :href="baseImgUrl + row.full_src" v-if="row.file_id && row.file_cate == 1">下载查看</a>
          </div>
        </template>
      </Table>
      <Paginate :total="chatInfoTotal" @on-change="changePage1" @on-page-size-change="changeSize1"
        :current="chatInfoSearchData.page">
      </Paginate>
    </Modal>

    <Modal v-model="imgShow" :closable="false" width="55">
      <img :src="imgShowUrl" style="width: 1000px;">
    </Modal>
  </div>
</template>

<script>
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
const baseImgUrl =
  process.env.NODE_ENV === "development"
    ? config.baseImgUrl.dev
    : config.baseImgUrl.pro;
import Paginate from "@/components/paginate/paginate.vue";
export default {
  name: "userList",
  components: {
    Paginate,
  },
  data() {
    return {
      baseUrl: baseUrl,
      baseImgUrl: baseImgUrl,
      searchData: {
        sort: "desc",
        order_by: "",
        page: 1,
        limit: 10,
      },
      // 列表
      columns: [
        {
          title: "订单名称",
          align: "center",
          key: "order_name",
        },
        {
          title: "群名",
          align: "center",
          key: "title",
        },
        {
          title: "操作",
          align: "center",
          slot: "makeSlot",
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 聊天记录
      chatInfoModal: false,
      chatInfoList: [],
      chatInfoTotal: 0,
      chatInfoColumns: [
        {
          title: "发送者",
          align: "center",
          key: "from_user_name",
          slot: "fromSlot",
          maxWidth: 200,
        },
        {
          title: "发送内容",
          align: "center",
          key: "content",
          slot: "contentSlot",
        },
        {
          title: "发送时间",
          align: "center",
          key: "create_time",
          maxWidth: 160,
        },
      ],
      chatInfoSearchData: {
        chat_identify: "",
        search: "",
      },
      departmentList: [],
      designArr: [],
      imgShow: false,
      imgShowUrl: "",
    };
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios("/admin/chat/getChatList", params).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        order_by: "",
        sort: "",
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    showChatInfo(identify) {
      this.chatInfoSearchData.page = 1;
      this.chatInfoSearchData.chat_identify = identify;
      this.getChatInfo();
      this.chatInfoModal = true;
    },
    getChatInfo() {
      this.$axios("/admin/chat/getChatRecord", this.chatInfoSearchData).then((res) => {
        this.chatInfoList = res.data
        this.chatInfoTotal = res.total
      });
    },
    changePage1(page) {
      this.chatInfoSearchData.page = page;
      this.getChatInfo();
    },
    changeSize1(size) {
      this.chatInfoSearchData.limit = size;
      this.getChatInfo();
    },
    download(chat_identify) {
      this.$axios("/admin/chat/download", {
        chat_identify: chat_identify,
      }).then((res) => {
        console.log(res);
        let a = document.createElement("a");
        a.href = res.domain + "/" + res.file_path;
        a.click();
        this.$axios("/admin/chat/removeFile", {
          unlink_file_name: res.file_name,
        });
      });
    },
    // 获取部门列表
    getdepartment() {
      this.$axios("/admin/department/getDepartmentArr").then((data) => {
        this.departmentList = data;
      });
    },
    getdesignArr() {
      this.$axios("/admin/design/getArr").then((data) => {
        this.designArr = data;
      });
    },
    showImg(url) {
      this.imgShow = true;
      this.imgShowUrl = url;
    },
  },
  created() {
    this.getList();
    this.getdepartment();
    this.getdesignArr();
  },
};
</script>
<style></style>
